<template>
    <div class="dashboardEditorCard">

        <div class="card" v-if="itemData">
            <div class="card-title">
                {{itemData.title}}
            </div>
            <div class="card-more">
                <el-row>
                    <el-col v-bind="itemGrid">
                        <div class="item">
                            <img class="item-img" src="~@/assets/images/dashboard/icon_01.png" alt="">
                            <div class="item-content">
                                <div class="text">
                                    <div class="text-num"> {{setSemicolon(itemData.day)}}</div>
                                    <div class="text-util">个</div>
                                </div>
                                <div class="tip">
                                    今日
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col v-bind="itemGrid">
                        <div class="item">
                            <img class="item-img" src="~@/assets/images/dashboard/icon_02.png" alt="">
                            <div class="item-content">
                                <div class="text">
                                    <div class="text-num"> {{setSemicolon(itemData.week)}}</div>
                                    <div class="text-util">个</div>
                                </div>
                                <div class="tip">
                                    近7日
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col v-bind="itemGrid">
                        <div class="item">
                            <img class="item-img" src="~@/assets/images/dashboard/icon_03.png" alt="">
                            <div class="item-content">
                                <div class="text">
                                    <div class="text-num"> {{setSemicolon(itemData.month)}}</div>
                                    <div class="text-util">个</div>
                                </div>
                                <div class="tip">
                                    近30日
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col v-bind="itemGrid">
                        <div class="item">
                            <img class="item-img" src="~@/assets/images/dashboard/icon_04.png" alt="">
                            <div class="item-content">
                                <div class="text">
                                    <div class="text-num"> {{setSemicolon(itemData.quarter)}}</div>
                                    <div class="text-util">个</div>
                                </div>
                                <div class="tip">
                                    近90日
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>
</template>
  
<script>
import { mapGetters } from "vuex";
import { setSemicolon } from '@/utils/index'
export default {
    name: "DashboardEditor",

    props: {
        itemData: {
            type: Object,
            default: null
        }
    },

    data() {
        return {
            setSemicolon: setSemicolon,
            itemGrid: {
                xl: 6,
                lg: 6,
                md: 6,
                sm: 12,
                xs: 12,
            }
        };
    },

    computed: {
        ...mapGetters(["name", "avatar", "roles"]),
    },

    mounted() {
    }
};
</script>

<style lang="scss" scoped>
.dashboardEditorCard {
    .card {
        background: #ffffff;
        border-radius: 6px;
        padding: 20px;
        min-width: 335px;
        margin-bottom: 16px;

        &-title {
            color: #1D2129;
            font-weight: 600;
            font-size: 16px;
            padding-bottom: 20px;
        }

        &-more {
            .item {
                padding-top: 8px;
                display: flex;
                align-items: center;

                &-img {
                    width: 36px;
                    height: 36px;
                    margin-right: 10px;
                }

                &-content {
                    .text {
                        display: flex;
                        align-items: center;

                        &-num {
                            color: #1D2129;
                            font-size: 20px;
                        }

                        &-util {
                            color: #1D2129;
                            font-size: 12px;
                        }
                    }

                    .tip {
                        color: #86909C;
                        font-size: 12px;
                        padding-top: 4px;
                    }
                }
            }
        }
    }
}
</style>